<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">

      <panel-group @handleSetLineChartData="handleSetLineChartData" />

      <el-row :gutter="12" class="el-row" style="background:#fff;padding:16px 16px 0;margin-bottom:0px;">
        <div class="label-sub-list" style="margin-bottom: 0px">
          <div class="label">集群：</div>
          <div
            v-for="item in k8sInstanceList"
            :key="item.totalName"
            :label="item.totalName"
            :value="item.totalName"
            class="l-sub-item"
            :class="{active: curK8sInstance.totalName === item.totalName}"
            @click="onChangeInstance(item)"
          >
            {{ item.totalName }}
          </div>
        </div>
      </el-row>
      <el-row :gutter="12" class="el-row" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <el-col :span="24">
          <div class="v-title">
            <el-tooltip content="显示集群的cpu使用量" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
            Cpu Usage
          </div>
          <v-chart ref="cpuChart" class="v-chart" :options="cpuInfo" />
        </el-col>
      </el-row>
      <el-row :gutter="12" class="el-row" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <el-col :span="24">
          <div class="v-title">
            <el-tooltip content="显示集群的内存使用量" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
            Memory Usage
          </div>
          <v-chart ref="memChart" class="v-chart" :options="memInfo" />
        </el-col>
      </el-row>
    </div>

    <!-- 发布面板 -->
    <div class="budget-list-container">
      <publish-today-list />
    </div>
  </div>
</template>

<script>
import global_const from '@/mixins/global_const'
import PanelGroup from './dashboard/PanelGroup'
import PublishTodayList from './dashboard/PublishTodayList'
import { mapGetters } from 'vuex'
import { makeEchart, loadingOptions } from '@/utils/echartDataTrans'
import ECharts from 'vue-echarts'
import * as APIS from '@/api/server'

export default {
  name: 'Dashboard',
  components: {
    PanelGroup,
    PublishTodayList,
    'v-chart': ECharts
  },
  mixins: [global_const],
  data() {
    return {
      cpuInfo: {},
      memInfo: {},
      curK8sInstance: {
        totalName: '',
        k8sId: -1,
        namespace: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'env',
      'k8sInstanceList',
      'dates'
    ]),
    charInfoParam() {
      return {
        k8sId: this.curK8sInstance.id,
        namespace: this.curK8sInstance.namespace,
        env: this.env,
        minuteBegin: this.dates[0],
        minuteEnd: this.dates[1]
      }
    }
  },
  mounted() {
    this.$bus.$on('global-datetime-pick', this.fetchData)
    this.$bus.$on('global-env-change', data => {
      this.initK8sChartData()
    })

    const _this = this
    this.$nextTick(() => {
      _this.__resizeHandler = () => {
        if (_this.$refs.cpuChart) {
          _this.$refs.cpuChart.resize()
          _this.$refs.memChart.resize()
        }
      }
      window.addEventListener('resize', _this.__resizeHandler)
      _this.initK8sChartData()
    })
  },
  beforeDestroy() {
    this.$bus.$off('global-env-change')
  },
  methods: {
    fetchData() {
      this.getCpuInfo()
      this.getMemInfo()
    },
    initK8sChartData() {
      if (this.k8sInstanceList.length > 0) {
        this.onChangeInstance(this.k8sInstanceList[0])
      }
    },
    onChangeInstance(k8sInstance) {
      this.curK8sInstance = k8sInstance
      this.fetchData()
    },
    handleSetLineChartData(type) {
    },
    getCpuInfo() {
      const { cpuChart } = this.$refs
      cpuChart && cpuChart.showLoading(loadingOptions)
      APIS.queryK8sCpuHistoryChartInfo(this.charInfoParam).then(res => {
        this.cpuInfo = makeEchart(res)
      }).finally(() => {
        cpuChart && cpuChart.hideLoading() // 接口返回后结束loading状态
      })
    },

    getMemInfo() {
      const { memChart } = this.$refs
      memChart && memChart.showLoading(loadingOptions)
      APIS.queryK8sMemHistoryChartInfo(this.charInfoParam).then(res => {
        this.memInfo = makeEchart(res)
      }).finally(() => {
        memChart && memChart.hideLoading() // 接口返回后结束loading状态
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .v-chart {
    width: 100%;
  }

  .budget-list-container {
    padding: 32px;
    background-color: rgb(255, 255, 255);
    float: right;
    width: 30%;
  }

  .dashboard-editor-container {
    padding: 12px 36px 12px 36px;
    background-color: rgb(240, 242, 245);
    float: left;
    width: 70%;

    .github-corner {
      position: absolute;
      top: 0;
      border: 0;
      right: 0;
    }

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  .label-sub-list {
    display: flex;
    background-color: #f5f7fa;
    margin-bottom: 10px;
  }

  .label {
    padding: 10px;
  }

  .l-item {
    padding: 20px;
    cursor: pointer;
    &.active {
      color: #fff;
      background-color: #0af;
    }

    &.dead {
      color: grey;
    }
  }

  .l-sub-item {
    padding: 10px;
    cursor: pointer;
    &.active {
      color: #fff;
      background-color: #0af;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
